<!--  -->
<template>
<div class="cmt-container">
    <h3>评论区域</h3>
    <hr>
    <textarea placeholder="请输入你要评论的内容(最多评论200字)" maxlength="200" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
    <div class="cmt-list">
        <div class="cmt-itme" v-for="(itme, i) in comments" :key="itme.id">
            <div class="cmt-title">
                第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ itme.username}}&nbsp;&nbsp;发表时间:{{ itme.create_time}}
                    </div>
                <div class="cmt-body">
                    <!-- 利用三元表达式判断用户评论的值是否为空，为空就返回"用户很懒，没有评论" 不为空就返回用户评论  -->
                    {{ itme.content === '' ? '此用户很懒，没有评论' : itme.content }}
            </div>
        </div>
    </div>

    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
</div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
    data() {
        return {
            comments:[],
            pageIndex:1,
            msg:''
        }
    },
    created() {
        this.getComment()
    },
    methods: {
        getComment() {
            this.axios.post('/v2/comment_lst', {n_id:this.id}).then(res=>{
                
                if(res.data.code == 1){                   
                        // 获取评论列表数据
                    this.comments = res.data.data
                    //  加载更多评论不会覆盖以前的评论,使用concat方法把数组拼接上
                    // this.comments = this.comments.concat(res.data.data)

                }else{
                    Toast('获取评论失败')
                }
                
            })
        },
        getMore() {
            this.pageIndex++
            this.getComment
        },
        postComment() {
            if(this.msg.trim().length === 0 ){
                return Toast('评论内容不能为空!');
            }
                
            this.axios.post('/v2/comment_add', { n_id: this.id, content: this.msg.trim() })
            .then(res=>{
              if(res.data.code === 1){
                  this.getComment()
                  this.msg = ''
              }
                
                
            })
        }
    },
    props:['id']
};
</script>
<style lang='scss' scoped>
.cmt-container{
    h3{
        font-size: 1.25rem;
    }
    textarea{
        font-size: 0.85rem;
        height: 80px;
        margin: 0
    }
    .cmt-list{
        .cmt-itme{
                font-size: 0.85rem;
            .cmt-title{
                line-height: 20px;
                background-color: #cccccc;
            }
            .cmt-body{
                    line-height: 20px;
                    text-indent: 2em;
                }
        }
    }
}
</style>